<template>
  <div v-loading="loading" class="page-tree-container">
    <el-button type="primary" icon="el-icon-plus" size="small" round class="btn-add" @click="addPage">新增页面&nbsp;&nbsp;&nbsp;</el-button>
    <div class="page-tree-box">
      <el-scrollbar style="height: 100%" class="hid-scrollbar-x">
        <el-tree ref="tree" :data="list" :props="{ label: 'name' }" :highlight-current="true" :expand-on-click-node="false" node-key="id" default-expand-all @node-click="clickTree">
          <div slot-scope="{ node, data }" class="custom-tree-node flexRBC">
            <div class="flexRSC">
              <img
                v-if="node.level === 2 && data.subType"
                :src="require('@/assets/icon/app/i-page-' + data.subType + '.png')
                "
                alt
                srcset
                class="i-page-type"
              >
              <span class="app-line-one">{{ data.name }}</span>&nbsp;&nbsp;
              <el-tag v-if="data.primaryPage" class="primary-page" size="small">当前使用</el-tag>
            </div>
            <el-dropdown v-if="node.level === 2" :hide-on-click="false" size="mini" class="dropdown">
              <span class="el-dropdown-link">
                <i class="el-icon-more" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="editPage">编辑模块</el-dropdown-item>
                <el-dropdown-item @click.native="editConfig(data.id)">基础配置</el-dropdown-item>
                <el-dropdown-item v-if="!data.primaryPage && uniquePage.includes(data.subType)" @click.native="usePage(data)">设为使用</el-dropdown-item>
                <el-dropdown-item @click.native="delPage(data)">删除页面</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-tree>
      </el-scrollbar>
    </div>

    <!-- 组件 -->
    <DialogEditPageConfig ref="editPageConfig" />
  </div>
</template>

<script>
import { getPageList } from '@/views/wxaBuildModule/api/page'
import wxaBuildConfig from '@/views/wxaBuildModule/config'
import pageEditConfig from '../mixin/pageEditConfig'
import getters from '@/store/getters'
import { mapGetters } from 'vuex'
export default {
  mixins: [pageEditConfig],
  data() {
    return {
      // 配置
      // 状态
      loading: false,
      // 数据
      classifyCode: 'DEFAULT',
      uniquePage: [],
      activePageInfo: null,
      list: []
    }
  },
  computed: {
    ...mapGetters['activePageForm']
  },
  watch: {},
  created() {
    this.$bus.on('wxaBuildModuleRefreshAsidePageList', this.fetchData)
  },
  mounted() {
    this.uniquePage = wxaBuildConfig[this.classifyCode].uniquePage
    this.fetchData()
  },
  beforeDestroy() {
    this.$bus.off('wxaBuildModuleRefreshAsidePageList')
  },
  methods: {
    /**
       * 数据组
       */
    // 获取列表
    fetchData(params = { refreshActive: true }) {
      console.log('获取页面列表', params.refreshActive)
      this.defaultList()
      this.loading = true
      getPageList({ classifyCode: this.classifyCode })
        .then((res) => {
          const list = res.data || []
          // 为空则不显示
          if (list.length === 0) {
            this.$bus.emit('wxaBuildModuleChoosePage', null)
            return
          }

          this.list.forEach((level1) => {
            list.forEach((level2) => {
              if (level2.subType === level1.id) {
                level1.children.push(level2)
              }
            })
          })

          if (params.refreshActive) {
            // 激活第一个
            this.list.some((level1) => {
              return level1.children.some((level2) => {
                this.$nextTick(() => {
                  this.clickTree(level2, { level: 2 })
                  this.$refs.tree.setCurrentKey(level2.id)
                })
                return true
              })
            })
          } else if (this.activePageInfo) {
            // 激活原值
            this.list.some((level1) => {
              return level1.children.some((level2) => {
                if (this.activePageInfo.id == level2.id) {
                  this.$nextTick(() => {
                    this.clickTree(level2, { level: 2 })
                    this.$refs.tree.setCurrentKey(level2.id)
                  })
                  return true
                }
              })
            })
          }
        })
        .catch((err) => {})
        .finally(() => {
          this.loading = false
        })
    },

    // 默认list
    defaultList() {
      this.list = JSON.parse(
        JSON.stringify(wxaBuildConfig[this.classifyCode].pageTree)
      )
    },

    /**
       * 按钮组
       */
    // 新增页面
    addPage() {
      this.$refs.editPageConfig.open({ mode: 'add' }).then((res) => {
        this.fetchData({ refreshActive: false })
      })
    },

    // 点击tree
    clickTree(data, node) {
      console.log('点击Page', data)
      if (node.level !== 2) return
      this.activePageInfo = data
      this.$bus.emit('wxaBuildModuleChoosePage', data)
    }
    /**
       * 状态组
       */
    /**
       * 方法组
       */
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .page-tree-container {
    overflow: hidden;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .page-tree-box {
      height: calc(100% - 40px);
      flex: 1;
      width: 100%;
      margin-top: 16px;
      padding: 20px;
      background-color: #fff;
      border-radius: 20px;
    }
  }

  .btn-add {
    position: absolute;
    height: 32px;
  }

  .custom-tree-node {
    width: 100%;
    font-size: 14px;
    &:hover .dropdown {
      display: block;
    }
    .dropdown {
      display: none;
    }

    .i-page-type {
      vertical-align: baseline;
      width: 20px;
      height: 20px;
    }

    .el-icon-more {
      transform: rotate(90deg);
    }
  }
</style>
